<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
</head>
<body>
<script src='http://cdn.jsdelivr.net/vue/1.0.26/vue.js'></script>
<script src='https://cdn.jsdelivr.net/vue.router/0.7.10/vue-router.min.js'></script>
<div id="root">
	<p>{{message}}</p>
	<p>"{{reverseMessage()}}"</p>
	<p>"{{now()}}"</p>
</div>
<script>
	var vm = new Vue({
		el : "#root",
		data : {
			message : 'hello',
		},
		methods : {
			reverseMessage : function(){
				return this.message.split('').reverse().join('')
			},
			now : function(){
				return Date.now()
			}
		},
		computed : {
			// now : function(){
			// 	return new Date().getTime()
			// }
		}
	})
	/**
	 * 可以将同一个函数定义为一个method而不是一个计算机属性。对于最终的结果，两种方式确实是相同的。
	 * 然而不同的计算机属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值，
	 * 这就意味着只要message还没有改变，多次访问reversedMessage计算属性会立即返回之前的计算结果，而不必再次执行函数。
	 */
</script>	
</body>
</html>